<template>
    <p>vuex</p>
    <p>count:{{ count }}</p>
    <p>count1:{{ $store.state.count }}</p>
    <p>count2:{{ this.$store.state.count }}</p>
    <p>test:{{ test }}</p>
    <P>count重命名：{{ countalias }}</P>

    <P>getters:=====>>></P>
    <p>countAddFive:{{  $store.getters.countAddFive }}</p>
    <p>countAddFive:{{ countAddFive }}</p>
    <p>countAddFiveTem:{{ countAddFiveTem }}</p>

    <p>Mutations:=====>>></p>
    <button @click="addMut">addMut</button>
    <p>{{ count }}</p>
    <button @click="addPlayloadMut">addPlayloadMut</button>
    <button @click="add">add</button>
    <button @click="addcommit">addcommit</button>
    <button @click="addAlias">addAlias</button>

    <p>Action=====>>></p>
    <button @click="addActionMut">addActionMut</button>
    <button @click="asyncAddActionMut">asyncAddActionMut</button>
    <button @click="asyncAddPloyloadActionMut">asyncAddPloyloadActionMut</button>
    <button @click="addAction">addAction</button>
    <button @click="addActionDispatch">addActionDispatch</button>


    <!-- module -->
    <h1>命名空间</h1>
    <P>无命名空间</P>
    <P>访问模块A中的state数据：{{ $store.state.a.countA }}</P>
    <P>访问模块A中的getter数据：{{ $store.getters.countAA }}</P>

    <P>有命名空间</P>
    <P>访问模块B中的state数据：{{ $store.state.b.countB }}</P>
    <P>访问模块A中的getters数据：{{ $store.getters['b/countBB'] }}</P>


    <h1>Vuex module</h1>
    <button @click="commitIncreaseA">触发-moduleA-muations</button>
    <button @click="commitAsyncIncreaseA">触发-moduleA-actions</button>
    <br>
    <button @click="commitIncreaseB">触发-moduleB-muations</button>
    <button @click="commitAsyncIncreaseB">触发-moduleB-actions</button>

    <h1>Map模块xxx方法</h1>
    <h2>全局</h2>
    <p>state</p>
    <p>getters</p>
    <p>countA:{{ countA }}</p>
    <p>countAA:{{ countAA }}</p>

    <p>Mutations</p>
    <button @click="increaseA">触发increaseA</button>

    <h2>模块</h2>
    <p>state</p>
    <p>countB:{{ countB }}</p>
    <p>getters</p>
    <p>countBB:{{ countBB }}</p>
    <button @click="increaseB">触发increaseB</button>

</template>

<script>
import {mapState,mapGetters,mapMutations,mapActions} from "vuex"
 export default{
    computed:{
    //     count(){
    //        return this.$store.state.count
    //   }
    // // 数组
    // ...mapState(['count','test'])
    // 对象
    ...mapState({
        // count:state=> state.count,
        // test:state=> state.count,
        count:'count',
        test:'test',
        countalias:'count',
    }),
    // countAddFive(){
    //     return this.$store.getters.countAddFive
    // },
    // countAddFiveTem(){
    //     return this.$store.getters.countAddFiveTem
    // },
    // // 数组
    // ...mapGetters(['countAddFive','countAddFiveTem']),
    // 对象
    ...mapGetters({
        countAddFive:'countAddFive',
        countAddFiveAlias:'countAddFive',
        countAddFiveTem:'countAddFiveTem',
    }),
    // state module
    ...mapState({
        countA:state => state.a.countA
    }),

    // state 模块B
    ...mapState('b',['countB']),

    // getters 全局
    ...mapGetters(['countAA']),

    // getters 模块B
    ...mapGetters('b',['countBB'])
    },
    methods:{
        addMut(){
            this.$store.commit('add')
        },
        addPlayloadMut(){
            this.$store.commit('addPlayload',{num:10})
            // this.$store.commit({
            //     type:'addPlayload',
            //     num:10,
            // })
        },
        // ...mapMutations(['add','addPlayload']),
        addcommit(){
            this.addPlayload({num:20})
        },
        ...mapMutations({
            add:'add',
            addAlias:'add',
        }),
        addActionMut(){
            this.$store.dispatch('addAction')
        },
        asyncAddActionMut(){
            this.$store.dispatch('asyncAddAction')
        },
        asyncAddPloyloadActionMut(){
            this.$store.dispatch('asyncAddPloyloadAction',{num:20})

        },
        ...mapActions(['addAction','asyncAddPloyloadAction']),
        addActionDispatch(){
            this.asyncAddPloyloadAction({num:30})
        },

        commitIncreaseA(){
            this.$store.commit('increaseA')
        },
        commitAsyncIncreaseA(){
            this.$store.dispatch('asyncIncreaseA')
        },
        commitIncreaseB(){
            this.$store.commit('b/increaseB')
        },
        commitAsyncIncreaseB(){
            this.$store.dispatch('b/asyncIncreaseB')
        },
        // 模块A
        ...mapMutations(['increaseA']),
       // 模块B
       ...mapMutations('b',['increaseB'])
        
    },
    mounted(){
        console.log(this.$store);
    }
 }
</script> 